<template>
  <div class="menu">
		<div v-for="(item,index) in menulistArr">
			<router-link :to="item.herf">
				<img :src="item.iconSrc">
				<span>{{item.title}}</span>
			</router-link>
		</div>
  </div>
</template>

<script>
export default {
  name: 'MenuList',
	data(){
		return{
			menulistArr:[
				{
					iconSrc:"icon/1.png",
					title:"欢迎辞",
					herf:"/detail?cat=hyc&title=欢迎辞"
				},
				{
					iconSrc:"icon/2.png",
					title:"组织机构",
					herf:"/detail?cat=zzjg&title=组织机构"
				},
				{
					iconSrc:"icon/3.png",
					title:"会议通知",
					herf:"/detail?cat=hytz&title=会议通知"
				},
				{
					iconSrc:"icon/4.png",
					title:"专家查询",
					herf:"/expertList"
				},
				{
					iconSrc:"icon/5.png",
					title:"日程一览",
					herf:"/detail?cat=rcyl&title=日程一览"
				},
				// {
				// 	iconSrc:"icon/6.png",
				// 	title:"会场分布",
				// 	herf:"/detail?cat=hcfb&title=会场分布"
				// },
				{
					iconSrc:"icon/6.png",
					title:"大会信息",
					herf:"/detail?cat=dhxx&title=大会信息"
				},
				{
					iconSrc:"icon/7.png",
					title:"视频资料",
					herf:"/detail?cat=spzl&title=视频资料"
				},
				{
					iconSrc:"icon/8.png",
					title:"壁报资料",
					herf:"/detail?cat=hyzl&title=壁报资料"
				},
				{
					iconSrc:"icon/9.png",
					title:"参会报名",
					herf:"/enroll"
				},
			],
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.menu{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap:wrap;
	&>div{
		width: calc(30% - 40px);
		padding: 20px;
		img{
			width: 80%;
			height: auto;
		}
		span{
			display: block;
			font-size: 0.9rem;
			font-family: "黑体"
		}
	}
}
</style>
